import { memo, ReactElement } from "react";

import Image from "next/image";
import styles from "./index.module.scss";

import type { FC } from "react";
import { IProduct } from "@/services/modules/home";
export interface IProps {
  children?: ReactElement;
  product?: any;
  showTips?: boolean;
}

const GridViewItem: FC<IProps> = memo(function (props) {
  const { children, product, showTips = false } = props;
  const newProduct = product.products ? product.products : product;
  return (
    <>
      <div className={styles.container}>
        <div className={styles["image"]}>
          <Image
            src={newProduct?.coverUrl!}
            alt="product"
            width={230}
            height={230}
            priority
          />
          {showTips === true && (
            <div className={styles["price-change"]}>
              <div className={styles["new-price"]}>
                ￥{newProduct?.minPrice}
              </div>
              <div className={styles["old-price"]}>
                ￥{newProduct?.originalCost}
              </div>
            </div>
          )}
        </div>
        <div className={styles.info}>
          {newProduct?.couponLabelDesc !== undefined && (
            <span className={styles.coupon}>{newProduct?.couponLabelDesc}</span>
          )}
          <span className={styles.name}>{newProduct?.name}</span>
        </div>
        <div className={styles.price}>
          <span>￥{newProduct?.originalCost}</span>
        </div>
      </div>
    </>
  );
});

export default GridViewItem;
GridViewItem.displayName = "GridViewItem";
